<script setup>
import {defineExpose, defineEmits, ref} from "vue";
import * as yup from "yup";
import {useForm} from "vee-validate";
import {ApiCreate, ApiDetail, ApiUpdate} from "@/api/toolkit.js";
import {useRequest} from 'ahooks-vue';
import {useToast} from "primevue/usetoast";


const toast = useToast();


defineExpose({
    visible: (id) => {
        visible.value = true;
        editorId = id

        if (id > -1) {
            const {loading} = useRequest(ApiDetail, {
                defaultParams: [{id: id}], onSuccess: (e) => {
                    name.value = e.data.detail.name
                    type.value = e.data.detail.type
                    tags.value = e.data.detail.tags
                    desc.value = e.data.detail.desc
                }
            })
        }
    },
})

const emit = defineEmits(["refresh"])

const visible = ref(false)
let editorId = -1


let createSchema = yup.object().shape({
    name: yup.string().max(20, '字符长度过多').required('请输入脚本名称'),
    type: yup.number().max(2, '字符长度过多').required('请选择脚本类型'),
    tags: yup.string().nullable().max(32, '字符长度过多').default(''),
    desc: yup.string().nullable().max(255, '字符长度过多').default('')
});

const {defineField, handleSubmit, resetForm, errors} = useForm({
    validationSchema: createSchema,
});

const [name] = defineField('name');
const [type] = defineField('type');
const [tags] = defineField('tags');
const [desc] = defineField('desc');

const onSubmit = handleSubmit(async (values) => {

    if (editorId > -1) {
        let params = {...values, id: editorId}
        const result = await ApiUpdate(params);
        if (result.code === 0) {
            toast.add({severity: 'success', summary: '成功', detail: result.msg, life: 3000});
            emit('refresh')
            visible.value = false
        } else {
            toast.add({severity: 'danger', summary: '错误', detail: result.msg, life: 3000});
        }
    } else {
        const result = await ApiCreate({...values})
        if (result.code === 0) {
            toast.add({severity: 'success', summary: '成功', detail: result.msg, life: 3000});
            emit('refresh')
            visible.value = false
        } else {
            toast.add({severity: 'danger', summary: '错误', detail: result.msg, life: 3000});
        }
    }

    resetForm()
});
</script>

<template>
    <Dialog v-model:visible="visible" modal :header="editorId > -1 ? '编辑工具': '新增工具'"
            :style="{ width: '30rem' }" class="flex justify-center">
        <form @submit='onSubmit'>
            <div class="mt-5">
                <label for="name" class="text-sm font-semibold leading-6 text-gray-900">脚本名称</label>
                <div class="mt-2">
                    <InputText id="name" v-model="name" class="flex-auto w-full" autocomplete="off"/>
                </div>
                <small class="p-error">
                    {{ errors.name }}
                </small>
            </div>

            <div class="mt-5 grid   grid-cols-2 gap-x-6">
                <div>
                    <label for="type" class="text-sm font-semibold leading-6 text-gray-900">脚本类型</label>
                    <div class="mt-2">
                        <Select v-model="type" :options="[{code: 1, name: 'shell'},{code: 2, name: 'python3'}]"
                                optionLabel="name" optionValue='code' placeholder="选择类型" class="w-full"/>
                    </div>
                    <small class="p-error">
                        {{ errors.type }}
                    </small>
                </div>

                <div>
                    <label for="tags" class="text-sm font-semibold leading-6 text-gray-900">分类</label>
                    <div class="mt-2">
                        <InputText id="tags" v-model="tags" class="flex-auto w-full" autocomplete="off"/>
                    </div>
                    <small class="p-error">
                        {{ errors.tags }}
                    </small>

                </div>
            </div>

            <div class="mt-5">
                <label for="desc" class="text-sm font-semibold leading-6 text-gray-900">说明</label>
                <div class="mt-2">
                    <Textarea id="desc" v-model="desc" rows="3" cols="30" class="w-full"/>
                </div>
                <small class="p-error">
                    {{ errors.desc }}
                </small>
            </div>

            <div class="flex justify-end gap-2 mt-5">
                <Button type="button" label="取消" severity="secondary"
                        @click="() => visible = false"></Button>
                <Button type="submit" label="提交"></Button>
            </div>
        </form>

    </Dialog>
    <!--  <Toast/>-->
</template>

<style scoped>

</style>